<template>
  <div>
    <Dropdown trigger="hover" @on-click="selectLang">
      <a href="javascript:void(0)" style="color: unset;">
        <Icon type="md-globe" />
        {{ title }}
        <Icon :size="18" type="md-arrow-dropdown"/>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for=" item in langList1" :name="item.key" :key="item.key" :selected="$i18n.locale == item.key">{{item.name}}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: 'Language',
  props: {
    lang: {
      type: String,
      require: false
    }
  },
  data () {
    return {
      langList1: [
        {key: 'zh-CN', name: 'cn 中文简体', alias: '简体'},
        {key: 'zh-TW', name: 'tw 中文繁體', alias: '繁體'},
        {key: 'en-US', name: 'en English', alias: 'English'}
      ]
    };
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang;
    }
  },
  computed: {
    title () {
      let langItem = this.langList1.find(item=>item.key == this.$i18n.locale) || {};
      return langItem.alias || this.$i18n.locale;
    }
  },
  methods: {
    selectLang (name) {
      this.$emit('on-lang-change', name);
    }
  }
};
</script>
